<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>modal-box</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="container">
    <p>作为一名资深吃货，我的梦想是：吃不胖然后吃遍天下！那么你呢？</p>
    <!-- 触发器 -->
    <div id="img-box">
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/chnrou.png" alt="菜1"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/cjun.png" alt="菜2"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/dzhhui.png" alt="菜3"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/gbfen.png" alt="菜4"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/hycha.png" alt="菜5"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/mdfu.png" alt="菜6"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/sfan.png" alt="菜7"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/xhlrou.png" alt="菜8"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/yzhba.png" alt="菜9"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/cba.png" alt="菜10"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/xbdfu.png" alt="菜11"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/zjya.png" alt="菜12"></a></div>
    </div>
  </div>
  <!-- 模态框 -->
  <div id="modal-box">
    <!-- 内容 -->
    <div id="modal-container">
      <!-- 关闭按钮 -->
      <span id="close">×</span>
      <img id="insert-img">
      <p id="insert-title"></p>
    </div>
  </div>
  <script src="./script.js"></script>
</body>

</html>